<script setup>
import { ref, watch } from 'vue'

const albums = ref([
  { title: 'Album 1', artist: 'Artist A' },
  { title: 'Album 2', artist: 'Artist B' },
  { title: 'Album 3', artist: 'Artist C' }
])

const searchQuery = ref('')

import { useRouter } from 'vue-router'
import { getAlbumPage } from '@/api/album.js'

const router = useRouter()

const goToAlbumDetail = (album) => {
  router.push({ name: 'SongList', query: { albumId: album.id } })
}

const getAlbum = async () => {
  const res = await getAlbumPage({
    pageNum: 1,
    pageSize: 10,
    name: searchQuery.value,
    status: 1
  })
  albums.value = res.data.records
}
getAlbum()

watch(searchQuery, () => {
  setTimeout(() => {
    getAlbum()
  }, 700)
})
</script>

<template>
  <div class="album-container">
    <h1>All Albums</h1>
    <el-input
      v-model="searchQuery"
      placeholder="Search by album name"
      style="width: 100%; max-width: 400px; margin-bottom: 20px"
      @keydown.enter="getAlbum"
    />
    <div class="album-list">
      <div
        v-for="(album, index) in albums"
        :key="index"
        class="album-item"
        :style="{
          backgroundImage: `url(${album.img})`,
          backgroundSize: 'cover',
          backgroundPosition: 'center'
        }"
        @click="goToAlbumDetail(album)"
      >
        <h3>{{ album.name }}</h3>
        <p>{{ album.desc }}</p>
      </div>
    </div>
  </div>
</template>

<style scoped>
.album-container {
  margin-top: 50px;
  text-align: center;
}

h1 {
  font-size: 36px;
  font-weight: bold;
  color: #333;
  margin-bottom: 30px;
}

.el-input {
  margin-bottom: 20px;
}

.album-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  justify-items: center;
}

.album-item {
  width: 100%;
  max-width: 250px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  position: relative;
}

.album-item:hover {
  cursor: pointer;
  transform: translateY(-10px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.album-item h3 {
  font-size: 18px;
  margin: 10px 0;
}

.album-item p {
  font-size: 14px;
  color: #ddd;
  margin-bottom: 20px;
}

.el-button {
  background-color: #ff4081;
  border-color: #ff4081;
  color: white;
  transition:
    background-color 0.3s ease,
    transform 0.3s ease;
}

.el-button:hover {
  background-color: #e3006b;
  border-color: #e3006b;
  transform: scale(1.05);
}

@media (max-width: 768px) {
  h1 {
    font-size: 28px;
  }

  .album-item {
    width: 90%;
    max-width: 300px;
  }
}
</style>
